<template>
	<view class="my">
		<!-- 头部 -->
		<view class="my-head">
			<view class="head-image">
				<image src="https://i0.hdslb.com/bfs/face/member/noface.jpg@120w_120h_1c.webp" mode=""></image>
			</view>
			<view class="head-title" @click="xhz">
				<text v-if="!name">B站登录</text>
			</view>
			<text v-show="name" style="    color: #777;
    font-size: 32rpx;">{{name}}</text>
		</view>
		<!-- 历史记录 -->
		<view class="head-history">
			<view class="history-ls" @click="lw">
				<text>历史记录</text>
				<view class="history-gd">查看更多<van-icon name="arrow" /></view>
			</view>
			<view class="history-image" v-if="shopList.length">
				<view class="image" v-for="item in shopList" :key="item[0].id">
					<image :src="item[0].img" mode=""></image>
					<text>{{item[0].name}}</text>
				</view>
			</view>
		</view>
		<!-- 意见反馈 -->
		<view class="head-yj">
			<text>意见反馈</text>
			<view class="history-gd"><van-icon name="arrow" /></view>
		</view>
		
		<view  v-show="name" class="login" @click="deleteLogin">退出登录</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { reactive, toRefs } from 'vue'
import { ShopStore } from '../../store/shop';
import { storeToRefs } from "pinia"
import { unipp } from '../../api/modules/login';

const state = reactive({ 
	name: ''
})

const shopStore = ShopStore()
// 初始化
const init = async () => {
	// 获取数据
	await shopStore.updateList()
}

// 跳转
const lw = () => {
	uni.navigateTo({ url: '/subpkg/History/History' })
}
const xhz = () => {
	uni.navigateTo({ url: '/subpkg/login/login' })
}

const deleteLogin = () => {
	  uni.removeStorageSync('token')
	  console.log('退出成功');
	  state.name =''
	  init()
}

// 页面加载
onLoad(async (message) => {
})

// 页面显示
onShow(async () => {
	init()
	const value = uni.getStorageSync("token");
	console.log(value);
	if(value) {
		const { data } = await unipp(value.rows2[0].uid)
		console.log(data[0].username);
		state.name = data[0].username
	}else {
		state.name =''
	}
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { name } = toRefs(state)
const { shopList } = storeToRefs(shopStore)
const { show } = storeToRefs(shopStore)
</script>

<style lang="scss">
.my {
	// 头部
	.my-head {
		height: 270rpx;
		// background-color: blanchedalmond;
		text-align: center;
		border-bottom: 2rpx solid #E3E5E7;
		.head-image {
			image {
				margin-top: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		.head-title {
			text {
				display: inline-block;
				width: 80px;
				height: 60rpx;
				background-color: #fb7299;
				line-height: 60rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	// 历史记录
	.head-history {
		border-bottom: 2rpx solid #E3E5E7;
		padding: 0 20rpx;
		font-size: 28rpx;
		.history-ls {
			display: flex;
			justify-content: space-between;
			line-height: 90rpx;
			.history-gd {
				font-size: 24rpx;
				color: #ccc;
			}
		}
		.history-image {
			overflow: hidden;
			height: 220rpx;
			.image {
				float: left;
				width: 220rpx;
				height: 200rpx;
				margin-left: 10rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 140rpx;
				}
			}
		}
	}
	// 意见反馈
	.head-yj {
		height: 90rpx;
		justify-content: space-between;
		line-height: 90rpx;
		display: flex;
		border-bottom: 2rpx solid #E3E5E7;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.login {
		text-align: center;
		margin-top: 60rpx;
		color: #777;
		font-size: 32rpx;
	}
}
</style>
